import React from 'react';
import styles from './style';
import {View,SafeAreaView,Image,Text,TouchableOpacity} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Back from '../../common/component/back'
import { FlatList } from 'react-native-gesture-handler';
const avatar = require('../../common/img/head.jpg');
const scStart =require('../../common/img/scStart.png')
const scStart2= require('../../common/img/scStart2.png')
export default class Fans extends React.Component{
  constructor(props) {
    super(props),
    this.state = {
      list :[
        {id:'1',
          img:avatar,
          name: '太酷不给撩',
          fans:323,
          work:222,
          startSatus:true
        },
        {id:'2',
          img:avatar,
          name: '太酷不给撩',
          fans:323,
          work:222,
          startSatus:false
        },
        {id:'3',
          img:avatar,
          name: '太酷不给撩',
          fans:323,
          work:222,
          startSatus:false
        }
      ]
    }
  }
  render() {
    let {navigation,route} = this.props
    let {list} = this.state
    let nameTitle = route.params.title
    _refreshMsssage= (index) =>{
      const litItem = !list[index].startSatus
      list[index].startSatus = litItem
      this.setState({list})
    }
    const rederItem = ({item,index}) => {
      return (
        <View style={styles.fansStyle} key={item.id} >
          <Animatable.View animation='slideInUp' style={[{ flexDirection:'row',}]}>
          <Animatable.Image source={item.img} style={styles.fansImg} animation='rotate'></Animatable.Image>
           <View style={styles.nameStyle}>
            <Text style={styles.topText}>{item.name}</Text>
            <Text style={styles.bottomText}>作品{item.work} 粉丝 {item.fans}</Text>
           </View>
          </Animatable.View>
           <TouchableOpacity onPress={() => _refreshMsssage(index)} style={styles.scStyle}>
                <View style={[styles.imgStyle,{ backgroundColor: item.startSatus? 'rgb(246,176,30)' : '#000' }]}>
                    <Animatable.Image source={item.startSatus? scStart2:scStart} style={styles.imgSize} animation={item.startSatus? "zoomIn": ''} delay={item.startSatus? 300:0 }></Animatable.Image>
               </View> 
            </TouchableOpacity>
        </View>
      )
    }
   
    return (
      <SafeAreaView style={styles.fans}>
        <Back navigation={navigation}></Back>
        <View>
    <Text style={styles.fansText}>{nameTitle}</Text>
        </View>
        <FlatList data={list} renderItem={rederItem}></FlatList>
      </SafeAreaView>
    )
  }
}
